/**
 * Created by hao.cheng on 2017/5/3.
 */
import React from 'react';
import MessageTool from '../../utils/MessageTool';
import ChatWebSocket from '../../ws/ChatWebSocket';

interface ServerContent {
    textContent: string
}

/**
 * 
 */
class Dashboard extends React.Component<ServerContent, ServerContent> {

    socket: WebSocket;

    connectioned: boolean;

    url = 'ws://127.0.0.1:18308/chat';

    constructor(props: ServerContent) {
        super(props)

        this.socket = new WebSocket(this.url);

        this.connectioned = false;

        this.state = { ...props }

    }

    /**
     *  左半部分页面
     */
    leftViethis = (): JSX.Element => {
        return (<div className="layui-side-scroll">
            <blockquote className="layui-elem-quote layui-bg-cyan" >正在咨询的会员</blockquote>
            <ul className="layui-unselect" id="user_list">
                <li className="layui-nav-item active" data-id="16" id="f-16" data-name="会员16" data-avatar="http://img.52z.com/upload/nethis.socket/image/20180213/20180213062641_35687.jpg" data-ip="127.0.0.1">
                    <img src="http://img.52z.com/upload/nethis.socket/image/20180213/20180213062641_35687.jpg" alt="" />
                    <span className="user-name">会员16</span><span></span>
                </li>
            </ul>
        </div>);
    }

    getMore = (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>): void => {
        console.log(event);
    }


    handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
        this.setState({ textContent: event.target.value })
    }

    /**
     *  客户对话
     */
    customerDialogue(): JSX.Element {
        return (
            <li>
                <div className="laykefu-chat-user">
                    <img src="http://img.52z.com/upload/nethis.socket/image/20180213/20180213062641_35687.jpg" />
                    <cite>
                        我
                                <i>2019-04-22 13:44:56</i>
                    </cite>
                </div>
                <div className="laykefu-chat-text">
                    xxx
                </div>
            </li>
        );
    }

    /**
     *  更多记录
     */
    moreRecords(): JSX.Element {
        return (
            <div className="layui-flow-more">
                <a href="" data-page="2" onClick={(e) => this.getMore(e)}>
                    <cite>更多记录</cite>
                </a>
            </div>
        );
    }

    dialogBox = (): JSX.Element => {
        return (
            <ul id="u-16">
                <this.customerDialogue />
                <this.customerServiceDialogue />
            </ul>
        );
    }

    customerServiceDialogue(): JSX.Element {
        return (
            <li className="laykefu-chat-mine">
                <div className="laykefu-chat-user">
                    <img src="/uploads/20190419/4eb84234138339f27018e1e3625afd15.jpg" />
                    <cite>
                        <i>2019-04-22 15:17:50</i>
                        客服小美
                    </cite>
                </div>
                <div className="laykefu-chat-text">辣妈辣妹</div>
            </li>
        );
    }



    clientSendContent = (): void => {

        ChatWebSocket.getInstance().sendContent({
            'cmd': "server.sendMessage",
            'data': { content: this.state.textContent }
        }, () => {
            let html = MessageTool.showMsg({
                username: "小骚逼",
                time: 1111111,
                avatar: "",
                content: this.state.textContent,
                name: "小骚逼"
            }, this.state.textContent);

            document.getElementById("u-16")?.insertAdjacentHTML('beforeend', html);
        });

    }

    sendMessage = (): JSX.Element => {
        return (
            <div className="msg-send">
                <div className="tools-bar">
                    <i className="layui-icon f30" id="face">&#xe60c;</i>
                    <i className="layui-icon f30" id="image">&#xe60d;</i><input className="layui-upload-file" type="file" name="file" />
                    <i className="layui-icon f30" id="file">&#xe61d;</i><input className="layui-upload-file" type="file" name="file" />
                </div>
                <div className="msg-box">
                    <textarea className="msg-area" id="msg-area" value={this.state.textContent} onChange={(e) => this.handleChange(e)}></textarea>
                </div>
                <div className="send-area">
                    <span>快捷键 Enter</span>
                    <button className="layui-btn layui-btn-small layui-bg-cyan" onClick={this.clientSendContent}>
                        <i className="layui-icon">&#xe609;</i>发送
                    </button>
                </div>
            </div>
        );
    }


    render() {

        return (
            <div>
                <this.leftViethis />
                <div className="chat-box laykefu-chat-main">
                    <this.moreRecords />
                    <this.dialogBox />
                </div>
                <this.sendMessage />
            </div>
        )
    }
}

export default Dashboard;